<template>
  <div class="app-container">
    <form-filter @on-filter="submitFilter" @on-export="clickExport" :downLoading="downloadLoading"></form-filter>
    <el-table :data="tableData.list">
      <el-table-column label="等级调整时间" prop="time" align="center">
        <template slot-scope="{ row }">
          {{ row.modifyTime | toTime('YYYY.MM.DD HH:mm:ss') }}
        </template>
      </el-table-column>
      <el-table-column label="账户名" prop="username" align="center">
      </el-table-column>
      <el-table-column label="等级调整前" prop="vipLevelBefore" align="center">
        <template slot-scope="{ row }">
          {{ toContent(row.vipLevelBefore,'VIP_LEVEL') }}
        </template>
      </el-table-column>
      <el-table-column label="等级调整后" prop="vipLevelAfter" align="center">
        <template slot-scope="{ row }">
          {{ toContent(row.vipLevelAfter,'VIP_LEVEL') }}
        </template>
      </el-table-column>
      <el-table-column label="调整方式" prop="modifyType" align="center">
        <template slot-scope="{ row }">
          {{ toContent(row.modifyType,'OPT_TYPE_LIST') }}
        </template>
      </el-table-column>
      <el-table-column label="操作人" prop="modifyOperator" align="center">
      </el-table-column>
    </el-table>
    <div class="pagination-container">
      <el-pagination background @size-change="gridSizeChange" @current-change="gridCurrentChange"
                     :current-page="filters.page" :page-sizes="gridPageSize" :page-size="filters.size"
                     :layout="gridLayout" :total="tableData.total">
      </el-pagination>
    </div>
  </div>
</template>

<script>
import formFilter from './formFilter';
import { grid } from '@/build';
import vipMixin from '../vipMixin';
import { vipModifyRecord } from '@/services/api/vipManage';
import { mapToArray } from '@/utils/base';

const headerMap = {
  modifyTime: '等级调整时间',
  username: '账户名',
  vipLevelBefore: '等级调整前',
  vipLevelAfter: '等级调整后',
  modifyType: '调整方式',
  modifyOperator: '操作人',
};
export default {
  name: 'levelLog',
  mixins: [grid, vipMixin],
  components: { formFilter },
  data() {
    return {
      tableData: {
        list: [],
        total: 0,
      },
      filters: {
        modifyTimeStart: moment().format('YYYY-MM-DD 00:00:00'),
        modifyTimeEnd: moment().format('YYYY-MM-DD 23:59:59'),
        size: 20,
        page: 1,
      },
      downloadLoading: false,
    };
  },
  mounted() {
    this.bindGet(vipModifyRecord, 'tableData', {
      action: 'getGrid',
      sendingData: 'filters',
    });
    this.doGet({ action: 'getGrid' });
  },
  methods: {
    async clickExport(formInline) {
      try {
        this.downloadLoading = true;
        // 临时导出方案，size最大为10000;
        formInline.size = 10000;
        const [status, result] = await vipModifyRecord(this.getFilterData(formInline));
        if (!status) throw new Error(result.message);
        const filename = 'VIP等级记录表.csv';
        const header = mapToArray(headerMap);
        const filterField = Object.keys(headerMap);
        const exportData = this.formatList(result.list);
        this.export2Excel(header, filterField, exportData, filename);
        setTimeout(() => {
          if (result.total > 10000) {
            this.$message({
              message: '最多只能导出10000条数据',
            });
          }
        }, 1000);
      } catch (e) {
        this.$message({
          message: `${e.message || ''}`,
          type: 'error',
        });
      } finally {
        this.downloadLoading = false;
      }
    },
    formatList(data) {
      return data.map(item => ({
        ...item,
        modifyTime: _.toTime(item.modifyTime),
        vipLevelBefore: this.toContent(item.vipLevelBefore, 'VIP_LEVEL'),
        vipLevelAfter: this.toContent(item.vipLevelAfter, 'VIP_LEVEL'),
        modifyType: this.toContent(item.modifyType, 'OPT_TYPE_LIST'),
      }));
    },
    submitFilter(formInline) {
      this.filters = this.getFilterData(formInline);
      this.gridSearch();
    },
    getFilterData(formInline) {
      const { time } = formInline;
      let modifyTimeStart;
      let modifyTimeEnd;
      if (!_.isUndefined(time) && _.isArray(time)) {
        modifyTimeStart = time[0];
        modifyTimeEnd = time[1];
        formInline = { ...formInline, modifyTimeStart, modifyTimeEnd };
      } else {
        this.filters.modifyTimeStart = undefined;
        this.filters.modifyTimeEnd = undefined;
      }
      return formInline;
    },
  },
};
</script>

<style lang="scss" scoped>

</style>
